<template>
	<div>
		<div class="c-headop" :class="[sessionId ? 'headopheight' : '']">
			<div class="btn_unselsect right_10" v-show="sessionId" @click="upgradeToVideo">{{ $t('ivcs.upgradeToVideo') }}</div>
			<div class="btn_unselsect right_10" @click="changeLanguage">{{ nowLanguage }}</div>
			<div class="btn_unselsect right_10" @click="addwater">{{ $t('ivcs.addwater') }}</div>
			<div class="btn_unselsect right_10" @click="addbackgroup">{{ $t('ivcs.addbackground') }}</div>
			<div class="t1 right_10 animate" v-show="agentStatus.otherWork && agentStatus.logged">{{ $t('ivcs.resting') }}...</div>
			<div class="t1 right_10 animate" v-show="appointValue && agentStatus.logged">{{ $t('ivcs.appointment') }}:{{ appointValue }}</div>

			<div class="btn_unselsect right_10" style="width: 130px;display:flex;justify-content:center;align-items:center" @click="appoint" v-show="sessionId">
				<div style="margin-right:10px;">{{ $t('ivcs.appointment') }}</div>
				<img src="../../static/image/skill_3.png" class="skill3" />
			</div>

			<div class="btn_unselsect right_10" v-show="!agentStatus.otherWork && !sessionId" @click="otherWork">{{ $t('ivcs.rest') }}</div>
			<div class="btn_selsect right_10" v-show="agentStatus.otherWork">{{ $t('ivcs.resting') }}</div>

			<div class="btn_unselsect right_10" :class="[isCalling ? 'iscalling' : '']" @click="ready" v-show="!agentStatus.ready">{{ $t('ivcs.unready') }}</div>
			<div class="btn_selsect right_10" @click="unready" v-show="agentStatus.ready">{{ $t('ivcs.ready') }}</div>

			<div class="btn_unselsect right_10" v-show="!agentStatus.checkIn" @click="checkIn">{{ $t('ivcs.checkIn') }}</div>
			<div class="btn_selsect right_10" v-show="agentStatus.checkIn" @click="checkOut">{{ $t('ivcs.checkOut') }}</div>

			<div class="btn_unselsect right_10" v-show="!agentStatus.logged" @click="loginAms">{{ $t('ivcs.amslogin') }}</div>
			<div class="btn_selsect right_10" v-show="agentStatus.logged">{{ $t('ivcs.amslogined') }}</div>

			<!-- <div class="btn_unselsect right_10"  @click="exitSystem">{{$t('ivcs.exit')}}</div> -->
			<!-- <img src="../../static/images/maikefeng-3@2x.png" class="audioimage" v-show="sessionId&&!audioMuted" @click="audioControl">
    <img src="../../static/images/jingyin-black@2x.png" class="audioimage" v-show="sessionId&&audioMuted" @click="audioControl"> -->
			<div class="btn_selsect right_10" v-show="sessionId && audioMuted" @click="audioControl">{{ $t('ivcs.unmute') }}</div>
			<div class="btn_unselsect right_10" v-show="sessionId && !audioMuted" @click="audioControl">{{ $t('ivcs.mute') }}</div>
		</div>
	</div>
</template>

<script>
import Language from './Toast/Language';
export default {
	name: 'Headop',
	/*坐席状态，，已登入，未登入，已就绪，未就绪,小休中，*/
	props: {
		agentStatus: {
			type: Object,
			default: function() {
				return {
					logged: false,
					ready: false,
					otherWork: false,
					checkIn: false
				};
			}
		},
		appointValue: {
			type: String
		},
		sessionId: {
			type: String
		},
		audioMuted: {
			type: Boolean
		},
		isCalling: {
			type: Boolean
		}
	},
	data() {
		return {
			nowLanguage: localStorage.getItem('language')
		};
	},
	methods: {
		upgradeToVideo() {
			this.$emit('upgradeToVideo');
		},
		checkIn() {
			this.$emit('checkIn');
		},
		checkOut() {
			this.$emit('checkOut');
		},
		loginAms() {
			if (this.sessionId) {
				this.$Message.error(this.$t('ivcs.sessionOperror'));
				return;
			}
			this.$emit('loginAms');
		},
		exitSystem() {
			if (this.sessionId) {
				this.$Message.error(this.$t('ivcs.sessionOperror'));
				return;
			}
			this.$emit('exitSystem');
		},
		logoutAms() {
			if (this.sessionId) {
				this.$Message.error(this.$t('ivcs.sessionOperror'));
				return;
			}
			this.$emit('logoutAms');
		},
		ready() {
			if (this.sessionId) {
				this.$Message.error(this.$t('ivcs.sessionOperror'));
				return;
			}
			this.$emit('ready');
		},
		unready() {
			if (this.sessionId) {
				this.$Message.error(this.$t('ivcs.sessionOperror'));
				return;
			}
			this.$emit('unready');
		},
		appoint() {
			this.$emit('appoint');
		},
		otherWork() {
			if (this.sessionId) {
				this.$Message.error(this.$t('ivcs.sessionOperror'));
				return;
			}
			this.$emit('otherWork');
		},
		audioControl() {
			if (this.sessionId) {
				this.$emit('audioControl');
			}
		},
		/*切换语言*/
		changeLanguage() {
			var self = this;
			this.$Modal.success({
				title: '',
				render: h => {
					return h(Language, {
						ref: 'Language'
					});
				},
				width: 600,
				closable: false,
				okText: 'OK',
				cancelText: '取消',
				onOk() {
					console.log(this.$refs.Language.language);
					if (this.$refs.Language.language == '简体中文') {
						localStorage.setItem('language', '简体中文');
						localStorage.setItem('lang', 'zh');
						self.$i18n.locale = 'zh';
						self.nowLanguage = localStorage.getItem('language');
					} else if (this.$refs.Language.language == '繁体中文') {
						localStorage.setItem('language', '繁体中文');
						localStorage.setItem('lang', 'tw');
						self.$i18n.locale = 'tw';
						self.nowLanguage = localStorage.getItem('language');
					}
				},
				onCancel() {}
			});
		},

		addwater() {
			this.$emit('addwater');
		},
		addbackgroup() {
			this.$emit('addbackgroup');
		}
	}
};
</script>

<style scoped>
button {
	border: 0;
	background-color: transparent;
	outline: none;
}
.c-headop {
	/*background-color: yellow;*/
	width: 158px;
	height: 316px;
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	align-items: center;
	background: #ffffff;
	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.13);
	padding-top: 14px;
	padding-left: 14px;
}
.headopheight {
	height: 376px;
}

.t1 {
	color: rgba(253, 253, 253, 1);
	font-size: 14px;
	/*width: 50px;*/
}

.btn_unselsect {
	width: 130px;
	height: 30px;
	border: 1px solid #2c89ea;
	border-radius: 2px;
	font-size: 12px;
	font-family: PingFang SC;
	font-weight: bold;
	color: #2c89ea;
	background-color: #ffffff;
	margin-bottom: 10px;
	line-height: 30px;
	cursor: pointer;
}

.btn_selsect {
	width: 130px;
	height: 30px;
	background: rgba(125, 179, 236, 1);
	border-radius: 4px;
	font-size: 14px;
	font-family: PingFang SC;
	font-weight: 400;
	color: rgba(255, 255, 255, 1);
	line-height: 30px;
	margin-bottom: 10px;
	cursor: pointer;
}

.btn_selsect_empty {
	width: 120px;
	height: 40px;
	border: 1px solid rgba(125, 179, 236, 1);
	border-radius: 4px;
	font-size:14px;
	/* max-font-size: 14px; */
	font-family: PingFang SC;
	font-weight: 400;
	color: rgba(255, 255, 255, 1);
	line-height: 40px;
}

.right_10 {
	margin-right: 10px;
}

.skilllist {
	width: 120px;
	height: 40px;
	position: relative;
}

.skilllists {
	width: 120px;
	height: 40px;
	position: relative;
}

.skill3 {
	width: 8px;
	height: 6px;
}

.skill33 {
	position: absolute;
	top: 17px;
	right: 15px;
	width: 12px;
	height: 6px;
}

.audioimage {
	width: 20px;
	height: 23px;
}

.animate {
	width: 200px;
	/*background-color: yellow;*/
	display: inline-block;
	white-space: nowrap;
	/*padding-right: 20px;*/
	animation: 10s wordsLoop linear infinite normal;
}
.iscalling {
	color: gray;
	border: 1px solid gray;
}
@keyframes wordsLoop {
	0% {
		transform: translateX(0%);
		-webkit-transform: translateX(0%);
	}
	100% {
		transform: translateX(-100%);
		-webkit-transform: translateX(-100%);
	}
}

@-webkit-keyframes wordsLoop {
	0% {
		transform: translateX(0%);
		-webkit-transform: translateX(0%);
	}
	100% {
		transform: translateX(-100%);
		-webkit-transform: translateX(-100%);
	}
}
</style>
